<template>
      <div class="com-container ">
        <div class="com-chart rank" ref='rark_ref'></div>
     </div>
</template>

<script>

export default {
    name:'rark',
      data() {
        return {
            chartsInstance:null,
            allData:null,
            startValue:0, // dataZoom 最左边的数据
            endValue:9,  // 最右边的数据
            timerId:null, // 定时器id
        }
    },
    created() {
         this.$socket.registerCallBack('RarkData', this.getData) 
    },
    mounted() {
        this.initCharts()
        // this.getData()
          this.$socket.send({
            action:'getData',
            socketType:'RarkData',
            chartName:'rank',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.screenAdapter)
        clearInterval(this.timerId)
        this.$socket.unregisterCallBack('RarkData') 
    },
    computed:{
     
    },
    methods: {
        initCharts(){
            this.chartsInstance = this.$echarts.init(this.$refs.rark_ref,'chalk')
            const initOpt={
                title:{
                    text:'▎ 地区销售排行',
                    left:20,
                    top:20
                },
                grid:{
                    top:'40%',
                    left:'5%',
                    right:'5%',
                    bottom:'5%',
                    containLabel:true
                },
                tooltip:{
                    show:true
                },
             xAxis:{
                 type:'category'
             },
             yAxis:{
                 type:'value'
             },
             series:{
                 type:'bar'
             }
            }
            this.chartsInstance.setOption(initOpt)
        },
       async getData(){
            const {data:res} = await this.$http.get('rank')
            this.allData = res
            this.allData.sort((a,b)=>{
                return b.value - a.value
            })
            this.startInterval() // 开始定时移动
            // 更新
            this.updateCharts()
        },
        updateCharts(){
            // 渐变色数组
            const colorArr = [
                ['#0BA82C', '#4FF778'],
                ['#2E72BF', '#23E5E5'],
                ['#5052EE', '#AB6EE5']
            ]

             // 所有省份名称
            const provinceArr = this.allData.map(v=>{
                return v.name
            })
            // 所有省份对应数据
            const valueArr = this.allData.map(v=>{
                return v.value
            })
            
         
            const dataOpt={
                dataZoom:{
                    show:true,
                    startValue:this.startValue,
                    endValue:this.endValue
                },
               xAxis:{
                   data:provinceArr
               },
               series:{
                   data:valueArr,
                   itemStyle:{
                       color(arg){
                           let targetcolorArr = null
                           if(arg.value>300){
                               targetcolorArr = colorArr[0]
                           }else if(arg.value>200){
                               targetcolorArr = colorArr[1]
                           }else{
                               targetcolorArr = colorArr[2]
                           }
                           return {
                            type:'linear', // 线性渐变
                            x:0,
                            y:0,
                            x2:0,
                            y2:1,
                            colorStops:[
                                {offset:0, color:targetcolorArr[0]}, // 0% 处为红色
                                {offset:1, color:targetcolorArr[1]}
                            ]
                        }
                         
                       }
                   }
               }
            }
            this.chartsInstance.setOption(dataOpt)
            this.chartsInstance.on('mouseover',()=>{
                clearInterval(this.timerId)
            })
            this.chartsInstance.on('mouseout',()=>{
                this.startInterval()
            })
        },
        screenAdapter(){
            const titleFontSize = this.$refs.rark_ref.offsetWidth / 100 * 3 // 标题文字大小
            console.log(titleFontSize);
            // 屏幕适配
            const adapterOpt={
              title:{
                  textStyle:{
                      fontSize:titleFontSize
                  }
              },
              series:[
                  {
                    barWidth:titleFontSize,
                    itemStyle:{
                        barBorderRadius:[titleFontSize/2,titleFontSize/2,0,0] // 圆角
                    }
                  }
              ]
            }
            this.chartsInstance.setOption(adapterOpt)
            this.chartsInstance.resize()
        },
        startInterval(){
            if(this.timerId){
                clearInterval(this.timerId)
            }
            // 定时移动图表
           this.timerId = setInterval(() => {
                this.startValue++
                this.endValue++
                if(this.endValue>this.allData.length-1){
                    this.startValue=0
                    this.endValue=9
                }
                this.updateCharts()
            }, 1500);
        }
    },
}
</script>

<style lang='less' scoped>

</style>